<template>
    <div>
        <div class="show_new">
            <div class="show_new_item" :data="form">
                <div class="show_new_item_pic" >
                    <img :src="form.image" alt="" :onerror="defalutLogoUrl" >
                </div>
                <div class="show_new_item_word">
                    <h3>{{form.title}}</h3>
                    <b>{{form.pubdate}}</b>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                         Numquam iste eum officiis eligendi. Illo cupiditate 
                         impedit eveniet accusantium aperiam quidem deleniti 
                         iste quibusdam vero iusto, voluptatibus nulla deserunt. 
                         Ea, molestias.
                    </p>
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
                         Numquam iste eum officiis eligendi. Illo cupiditate 
                         impedit eveniet accusantium aperiam quidem deleniti 
                         iste quibusdam vero iusto, voluptatibus nulla deserunt. 
                         Ea, molestias.
                    </p>
                </div>
                <div class="outBtn">
                    <el-button type="info" @click="returnBtn">返回</el-button>
                </div>
            </div>
            
        </div>
        <Footer></Footer>
    </div>
</template>

<script>
import Footer from '../../components/Footer/Footer.vue'
export default {
    components:{
        Footer
    },
    data(){
        return{
            id:'',
            form:'',
            // 图片加载不显示
             defalutLogoUrl:'this.src="'+  require("../../assets/img/7.jpg")  +'"',
        }
    },
    mounted(){
        console.log(this.$route.query.id);
        this.id = this.$route.query.id
        this.getselectMessage()
    },
    methods:{
        async getselectMessage(){
            const res = await this.http.post('/message/selectById',this.id)
            console.log(res);
            this.form = res
        },
        returnBtn(){
            this.$router.push('/news')
        }
    }
}
</script>

<style scoped>
.show_new{
    width: 100%;
    height:800px;
    /* background: pink; */
    position: relative;
    top: 20px;
}
.show_new_item{
    width: 800px;
    height:700px;
    margin: 0 auto;
    background: #ededed;
    border-radius: 10px;
}
.show_new_item_pic{
    width: 700px;
    height: 200px;
    /* background: lightyellow; */
    position: relative;
    top: 20px;
    margin: 0 auto;
    margin-bottom: 50px;
}
.show_new_item_pic img{
    width:100%;
    height: 100%;
}
.show_new_item_word{
    width: 700px;
    height: 400px;
    text-align: left;
    /* background: white; */
    position: relative;
    margin: 0 auto;
}
.show_new_item_word h3,b,p{
    margin-left: 20px;
}
.show_new_item_word h3{
    padding-top: 20px;
}
.show_new_item_word b{
    color: #6b6a6a;
    font-weight: 400;
}
.show_new_item_word p{
    width: 650px;
    height: 100px;
    /* background:#9b9a9a; */
    margin: 0 auto;
    padding-top: 20px;
}
.outBtn{
    width:200px;
    height:40px;
    background: pink;
    position: relative;
    top: -60px;
    margin: 0 auto;
}
.outBtn .el-button{
    width: 100%;
    height: 100%;
}
</style>